/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
import type { ConnectState } from '@/models/connect';
import { connect } from 'umi';
import type { SyncZtCountermanIndexType } from '../types/SyncZtCounterman';
import { syncZtCounterman } from '@/services/customerSearch';
import CommonResetButton from './_common/CommonResetButton';
const FormItem = Form.Item;

interface FormType {
  code: string;
}

const SyncZtCounterman = (props: SyncZtCountermanIndexType) => {
  const { screenSize } = props;
  const [form] = Form.useForm();
  const [content, setContent] = useState('');
  const [formValue, setFormValue] = useState<string>('');

  const onFinish = async (values: FormType) => {
    const { code, data, msg } = await syncZtCounterman({ ...values });
    if (code == 0 && data?.phone) {
      setContent(`已同步：${data.phone}`);
    } else {
      setContent(msg);
    }
  };

  const onReset = () => {
    form.resetFields();
    setContent('');
    setFormValue('');
  };

  const onFormChange = () => {
    setFormValue(form.getFieldValue('code'));
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        layout={screenSize ? 'vertical' : 'inline'}
        style={{ marginBottom: 20 }}
      >
        <FormItem
          label={'中通工号'}
          name='code'
          rules={[{ required: true, message: '请输入工号' }]}
        >
          <Input
            allowClear
            style={{ width: 200 }}
            onChange={onFormChange}
            placeholder={'请输入工号'}
          />
        </FormItem>
        <FormItem>
          <Button type='primary' htmlType='submit' disabled={!formValue} loading={false}>
            中通工号同步
          </Button>
          <CommonResetButton onReset={onReset} />
        </FormItem>
      </Form>
      <div>{content}</div>
    </>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  realnameBillData: customerSearch.realnameBillData || {},
  tableLoading: loading.effects['customerSearch/syncZtCounterman'] || false,
}))(React.memo(SyncZtCounterman));
